<template>
    <div class="treeTable">
        <div class="card tree">
            <el-tree :data="treeData" :props="defaultProps" :highlight-current="true" @node-click="handleNodeClick"/>
        </div>
        <div class="formTableBox">
            <form-layout @query="query">
                <template #baseForm1_8>
                    <g-formItem type="input" :value="userName" label="用户姓名"
                        @valueChange="(v) => (userName = v)"></g-formItem>
                </template>
                <template #baseForm2_8>
                    <g-formItem type="select" :value="sex" label="性别" :option="sexOptions"
                        @valueChange="(v) => (sex = v)"></g-formItem>
                </template>
                <template #highForm1_8>
                    <g-formItem type="select" :value="sex" label="性别" :option="sexOptions"
                        @valueChange="(v) => (sex = v)"></g-formItem>
                </template>
                <template #table>
                    <my-table ref="queryTable" :tableHeader="tableHeader()" :serialNumber="true" :isPaging="true"
                        :selection="true" url="/queryTable" @deleteSuccess="deleteSuccess">
                        <template #header_name>
                            <el-button class="g-minibutton">用户姓名</el-button>
                        </template>
                        <template #userStatus="{ data }">
                            <g-formItem type="switch" labelWidth="60px" :value="data.row['userStatus']"
                                :label="data.row['userStatus'] ? '禁用' : '启用'"
                                @valueChange="(v) => (data.row['userStatus'] = v)"></g-formItem>
                        </template>
                    </my-table>
                </template>
            </form-layout>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const options = [
    { label: "20", value: 1 },
    { label: "21", value: 2 },
    { label: "22", value: 3 },
    { label: "23", value: 4 },
    { label: "24", value: 5 },
    { label: "25", value: 6 },
];
const tableHeader = () => {
    return [
        {
            prop: "info",
            label: "个人信息",
            children: [
                {
                    prop: "sex",
                    label: "性别",
                    edit: true,
                    type: "select",
                    options: [
                        { label: "男", value: 1 },
                        { label: "女", value: 2 },
                    ],
                },
                {
                    prop: "age",
                    label: "年龄",
                    edit: true,
                    type: "select",
                    options: options,
                },
                { prop: "name", label: "姓名", headerSlot: true, width: 120 },
                { prop: "email", label: "邮箱", width: 100 },
            ],
        },
        { prop: "userStatus", label: "用户状态", isSlot: true, width: 150, },
        {
            prop: "address",
            label: "地址",
            width: 260,
            edit: true,
            type: "input",
        },
        { prop: "title", label: "备注", width: 450, },
    ]
};
const sexOptions = [{ label: "男", value: 1 }, { label: "女", value: 0 }]
const defaultProps = {
    children: 'children',
    label: 'name',
}
const treeData = [
    {
        "id": "1",
        "name": "华东分部",
        "children": [
            {
                "id": "11",
                "name": "研发部"
            },
            {
                "id": "12",
                "name": "市场部"
            },
            {
                "id": "13",
                "name": "商务部"
            },
            {
                "id": "14",
                "name": "财务部"
            }
        ]
    },
    {
        "id": "2",
        "name": "华南分部",
        "children": [
            {
                "id": "21",
                "name": "研发部"
            },
            {
                "id": "22",
                "name": "市场部"
            },
            {
                "id": "23",
                "name": "商务部"
            },
            {
                "id": "24",
                "name": "财务部"
            }
        ]
    },
    {
        "id": "3",
        "name": "西北分部",
        "children": [
            {
                "id": "31",
                "name": "研发部"
            },
            {
                "id": "32",
                "name": "市场部"
            },
            {
                "id": "33",
                "name": "商务部"
            },
            {
                "id": "34",
                "name": "财务部"
            }
        ]
    }]

const queryTable = ref(null)
onMounted(() => {
    queryTable.value.query()
})
</script>
<style scoped>
.treeTable {
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.tree {
    width: 220px;
    height: 100%;
}

.formTableBox {
    width: calc(100% - 230px);
    display: flex;
    flex-direction: column;
}
</style>